<template>
	<progress :percent="percent" active-mode="forwards" active show-info />
	<swiper :current="swiperCurrent" @change="changeCurSwiper">
		<swiper-item v-for="(item,index) in topicData" :key="index">
			<!-- topic -->
			<view class="topic-area">
				<text>{{item.type==='101'?'单选':'多选'}}</text>
				<text>{{item.ExamQuestion}}</text>
			</view>
			<!-- 如果有图，就放在这里 -->
			<view class="picture" v-if="item.picture!= ''"><image :src="item.picture" mode="widthFix"></image></view>
			<!-- 单选或多选题目 -->
			<block v-if="item.type==='101'">
				<view class="select-answer" v-for="(item1,index1) in item.options" :key="index1">
					<text v-if="!item1.isCorrect">{{sequence[index1]}}</text>
					<view class="picture" v-if="item1.isCorrect"><image :src="item1.icon_url" mode="widthFix"></image></view>
					<text @click="judment(index,index1,item1.select_id,item.correct_id,item1.isCorrect)">{{item1.select}}</text>
				</view>
			</block>
			<block v-if="item.type==='102'">
				<view class="select-answer" v-for="(item1,index1) in item.options" :key="index1">
					<text v-if="!item1.whetherSubmit" :class="multiTextStyle(item1.isCorrect)">{{sequence[index1]}}</text>
					<image v-if="item1.whetherSubmit" :src="item1.icon_url" mode="widthFix"></image>
					<text @click="multichoise(index,index1,item1.select_id,item.correct_id,item1.isCorrect,item.store_check_id)">{{item1.select}}</text>
				</view>
				<button class="submit" v-if="!item.answered" 
				:type="item.store_check_id.length>=1 ? 'primary' : 'default'" :disabled="item.store_check_id.length===0"
				@click="judmentMulti(index,item.store_check_id,item.correct_id,item.options)"
				>确定</button>
			</block>

			<!-- 正确答案 -->
			<block v-if="item.answered">
				<view class="Correct-answer">
					<text>答案:</text>
					<text v-for="(item1,index1) in item.correct_answer" :key="index1">{{item1}}</text>
				</view>
				<!-- 题目解析 -->
				<view class="analyze"><view class="analyze-title">
					<text></text>
					<text>题目解析</text>
				</view>
					<text user-select>{{item.analyze}}</text>
				</view>
			</block>
		</swiper-item>
	</swiper>
	<!-- 底部固定 -->
	<view class="bottom-area">
		<view class="bottom-left" @click="submitForm=true">交卷 {{timeKeep.formatTime}}</view>
		<view class="bottom-right" @click="popupShow=true">
			<view>
				<text>{{panel.essence.length}}</text>
				<text>答对</text>
			</view>
			<view>
				<text>{{panel.detain.length}}</text>
				<text>答错</text>
			</view>
			<view>
				<text>{{curTopic}}/{{topicData.length}}</text>
				<text>题板</text>
			</view>
		</view>
	</view>
	<!-- popup 题板弹窗 -->
	<page-container :show="popupShow" @beforeleave="popupShow=false" @clickoverlay="popupShow=false">
		<view class="popup-view">
			<view class="topic-number">
					<view>
						<text v-for="(item,index) in topicData.length" :key="index" :class="getPopupTopicStyle(index)" @click="jumpTopic(index)">{{item}}</text>
					</view>
			</view>
		</view>
	</page-container>
	<!-- 如果错题多达限制数量，就弹窗提醒用户 -->
	<view class="below-standard" v-if="isUnqualified">
		<view class="main-content">
			<text class="unqualified-title">成绩不合格</text>
			<text class="unqualified-alert">已答错6题，正确率待提升</text>
			<view class="submit-button">
				<text @click="isUnqualified=false">继续考试</text>
				<text @click="examCompleted">现在交卷</text>
			</view>
		</view>
	</view>
	
	<!-- 用户自主交卷 -->
	<view class="below-standard" v-if="submitForm">
		<view class="main-content">
			<text class="unqualified-title">确认交卷</text>
			<view class="answer-data">
				<view>
					<text>{{topicData.length - (panel.essence.length + panel.detain.length)}}</text>
					<text>未答题数</text>
				</view>
				<view>
					<text>{{timeKeep.formatTime}}</text>
					<text>剩余时间</text>
				</view>
				<view>
					<text>{{panel.essence.length*2}}</text>
					<text>考试得分</text>
				</view>
			</view>
			<view class="submit-button">
				<text @click="submitForm=false">继续考试</text>
				<text @click="examCompleted">现在交卷</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref,watch } from 'vue'
	import { onShow,onUnload } from '@dcloudio/uni-app'
	import { select } from '/api/wechat.js' 
	//存储所有题
	const topicData = ref([])
	//存储题目顺序abcd
	const sequence = ref(['A','B','C','D','E','F'])
	//进度条
	const percent = ref(0)
	//滑块顺序，下标从零开始
	const swiperCurrent = ref(0)
	//当前题目序号
	const curTopic = ref(1)
	//倒计时
	const timeKeep = reactive({
		countdown:2700,//倒计时
		formatTime:'45:00',
		maneuver:null // 存放该定时器
	})
	
	//页面显示
	onShow(async()=>{
		const card = (await select('/getTopic')).data
		//打乱牌序
		shuffleCard(card)
		//打乱ABCD选项
		card.forEach(item=>{shuffleCard(item.options)})
		topicData.value = card
		
		 //定时器保持
		 scourTimeKeep()
	})
	//页面销毁
	onUnload(()=>{
		//倒计时销毁
		clearInterval(timeKeep.maneuver)
	})
	// icon
	const shutter = ref(['/static/yes.png','/static/no.png'])
	const panel = reactive({
		// 存储答对idx
		'essence':[],
		// 存储答错idx
		'detain':[]
	})
	//单选题
	const judment = (index,index1,select_id,correct_id,isCorrect) => {
		// 如果回答过的题目就不允许再次回答
		if(topicData.value[index].answered){
			return false
		}
		
		//正确
		if(correct_id.includes(select_id)){
			topicData.value[index].options[index1].icon_url = shutter.value[0] 
			topicData.value[index].options[index1].isCorrect = true
			//存储答对题的下标
			panel.essence.push(index)
			//取出正确答案的顺序
			var sequenceData = sequence.value[index1]
			//选择正确自动进入下一题
			if(swiperCurrent.value+1<topicData.value.length){
				setTimeout(()=>{
					swiperCurrent.value = index+1
				},500)
			}
		}else{
			topicData.value[index].options[index1].icon_url = shutter.value[1]
			topicData.value[index].options[index1].isCorrect = true
			//二维数组去找正确答案的index
			let idx = topicData.value[index].options.findIndex(item=>item.select_id===correct_id[0])
			topicData.value[index].options[idx].icon_url = shutter.value[0]
			topicData.value[index].options[idx].isCorrect = true
			//存储答错题的下标
			panel.detain.push(index)
			//取出正确答案的顺序
			var sequenceData = sequence.value[idx]
		}
		//取出正确答案的顺寻并更新数据
		topicData.value[index].correct_answer = [sequenceData]
		//选择了该题
		topicData.value[index].answered = true
		//每做一题目进度条加2
		percent.value += 2
	}
	
	//多选题
	const multichoise = (index,index1,select_id,correct_id,isCorrect,store_check_id) => {
		// 如果回答过的题目就不允许再次回答
		if(topicData.value[index].answered){
			return false
		}
		// 点击选中
		if(isCorrect){
			// 移除已选中的元素
			let rididx = topicData.value[index].store_check_id.findIndex(item=>item===select_id)
			topicData.value[index].store_check_id.splice(rididx,1)
			topicData.value[index].options[index1].isCorrect = false
		}else{
			topicData.value[index].store_check_id.push(select_id)
			// 代表已经选中
			topicData.value[index].options[index1].isCorrect = true
		}
	}
	// 多选题的选中或取消加上样式
	const multiTextStyle = isCorrect => isCorrect ? 'selected' : ''
	// 提交多选
	const judmentMulti = (index,store_check_id,correct_id,options) => {
		//判断是否都选对了
		let isSame = store_check_id.length===correct_id.length && store_check_id.every(item=>correct_id.includes(item))
		if(isSame){
			//存储答对题的下标
			panel.essence.push(index)
			//选择正确自动进入下一题
			if(swiperCurrent.value+1<topicData.value.length){
				setTimeout(()=>{
					swiperCurrent.value = index+1
				},500)
			}
		}else{
			//存储答错题的下标
			panel.detain.push(index)
		}
		//取出正确答案在视图层展示
		let correctId = correct_id.map(value=>options.findIndex(item=>item.select_id===value))
		correctId.forEach(item=>{
			topicData.value[index].options[item].whetherSubmit = true
			topicData.value[index].options[item].icon_url = shutter.value[0]
			topicData.value[index].correct_answer.push(sequence.value[item])
		})
		//取出错误答案在视图层加上错误图标
		let errId = []
		options.forEach((item,index)=>{
			if(!correct_id.includes(item.select_id)){
				errId.push(index)
			}
		})
		if(errId.length>0){
			errId.forEach(item=>{
				topicData.value[index].options[item].whetherSubmit = true
				topicData.value[index].options[item].icon_url = shutter.value[1]
			})
		}
		//选择了该题
		topicData.value[index].answered = true
		//每做一题目进度条加2
		percent.value += 2
	}
	
	// 滑动时触发
	const changeCurSwiper = (event) => {
		curTopic.value = event.detail.current + 1
	}
	//给选择的错题和正确题目顺序加上样式
	const getPopupTopicStyle = (index) => {
		//正确题目
		if(panel.essence.includes(index)){
			return 'essence-text'
		}else if(panel.detain.includes((index))){
			return 'detain-text'
		}else{
			return ''
		}
	}
	//切换popup的隐藏和显示
	const popupShow = ref(false)
	//点击题号跳转到对应题目
	const jumpTopic = (index) => {
		swiperCurrent.value = index
		curTopic.value = index + 1
		popupShow.value = false
	}
	//是否不合格
	const isUnqualified = ref(false)
	watch(panel.detain,(newarr)=>{
		if(newarr.length==6){
			isUnqualified.value = true
		}
	},{deep:true})//原生javascript需要深度监听
	//是否交卷弹窗的隐藏与显示
	const submitForm = ref(false)
	//每秒更新倒计时
	function scourTimeKeep(){
		timeKeep.maneuver = setInterval(()=>{
			timeKeep.countdown--
			timeKeep.formatTime = Math.floor(timeKeep.countdown/60).toString().padStart(2,'0')+':'+(timeKeep.countdown%60).toString().padStart(2,'0')
			//倒计时结束就终止他
			if(timeKeep.countdown<=0){
				clearInterval(timeKeep.maneuver)
				//倒计时结束，自动交卷
				uni.showToast({
					title:'即将自动交卷！',
					icon:'loading',
					duration:3000,
					mask:true
				})
				//跳转
			}
		},1000)
	}
	//打乱牌序
	function shuffleCard(card){
		for(let i=card.length-1;i>0;i--){
			let j = Math.floor(Math.random()*(i+1));
			[card[i],card[j]] = [card[j],card[i]]
		}
	}
	//跳转提交考试成绩
	function examCompleted(){
		const data = JSON.stringify({
			mark:2*panel.essence.length,
			leaveQuestion:topicData.value.length - (panel.essence.length + panel.detain.length),
			essenceQuestion:panel.essence.length,
			detainQuestion:panel.detain.length
		})
		uni.redirectTo({url:'/symmetry/shrub/performance?data='+data})
	}
	
	
</script>

<style lang="less">
	@import url("/static/style.css");
	.selected{background-color: #333;color: #fff;}
	.essence-text{background-color: #5dbf84 !important;color: #fff;}
	.detain-text{background-color: red !important;color: #fff;}
</style>